<template>
	<view>
	  <view class="container">
		<view 
		  v-for="(item, index) in events" 
		  :key="index" 
		  class="event-item" 
		  :class="{'fade-in': index >= 0}" 
		>
		  <text class="title">{{ item.title }}</text>
		  <text class="days">已经
			<text class="highlight">{{ item.days }}</text>天
		  </text>
		  <view class="sub-info">
			<text class="date">{{ item.date }}</text>
		  </view>
		</view>
	  </view>
  
	  <view class="button-sp-area">
		<view class="mini-btn" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @click="goToNextPage">+</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		events: [
		  { title: '我们在一起', date: '2024年11月14日', days: '73' },
		  { title: '我们第一次逛街', date: '2025年1月24日', days: '2' },
		  { title: '我们第一次散步', date: '2025年1月24日', days: '2' },
		  // ...其他事件
		],
		buttonActive: false,
	  };
	},
	methods: {
	  handleTouchStart() {
		this.buttonActive = true;  // 按钮被按下
	  },
	  handleTouchEnd() {
		this.buttonActive = false;  // 按钮被释放
	  },

	  goToNextPage(){
		uni.navigateTo ({
			url: '/pages/add/index' 
			});
 		}
	}
  }
  </script>
  
  <style scoped>
  .container {
	padding: 20px;
	background-color: #f8e1f4; /* 粉色背景，营造浪漫氛围 */
  }
  
  .event-item {
	margin-bottom: 20px;
	padding: 15px;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 10px 10px 12px rgba(59, 15, 15, 0.1);
	opacity: 0;
	animation: fadeIn 1s ease-in forwards; /* 为每个事件添加淡入动画 */
  }
  
  .event-item:hover {
	transform: scale(1.05); /* 悬停时放大 */
	box-shadow: 12px 12px 16px rgba(59, 15, 15, 0.2); /* 悬停时卡片阴影效果 */
  }
  
  .title {
	font-size: 20px;
	font-weight: bold;
	color: #000000; 
	margin-bottom: 8px;
  }
  
  .sub-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
  }
  
  .date {
	font-size: 14px;
	color: #423c41;
  }
  
  .days {
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 10px;
  }
  
  .highlight {
	color: #f447ba; /* 明亮的粉色，突出显示 */
	font-size: 24px;
  }
  
  .button-sp-area {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
  }
  
  .mini-btn {
	width: 70px;
	height: 70px;
	border-radius: 35px;
	font-size: 50px;
	background: linear-gradient(to bottom, #d3096e, #ff6fcf); /* 浪漫的渐变色 */
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.1s ease, background-color 0.2s ease; /* 添加平滑过渡效果 */
	animation: pulse 2s infinite; /* 按钮的脉动动画 */
  }
  
  .mini-btn:active {
	transform: scale(0.9); /* 点击时按钮缩小 */
	background-color: #ff4676; /* 按钮按下时的颜色变化 */
  }
  
  .mini-btn.active {
	transform: scale(0.9); /* 触发时动画 */
	background-color: #ff4676; /* 按下后的颜色变化 */
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0;
	  transform: translateY(10px); /* 初始时稍微下移 */
	}
	100% {
	  opacity: 1;
	  transform: translateY(0); /* 结束时恢复原位 */
	}
  }
  
  @keyframes pulse {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.1);
	}
	100% {
	  transform: scale(1);
	}
  }
  
  @media (max-width: 768px) {
	.container {
	  padding: 15px;
	}
  
	.event-item {
	  padding: 12px;
	}
  
	.mini-btn {
	  width: 60px;
	  height: 60px;
	  font-size: 28px;
	}
  }
  </style>
  